// 1. 全局引入Vue
import Vue from 'vue'
// 2. 引入全局的css重置样式文件
import 'normalize.css/normalize.css'
// 3. 完整导入ElementUI
/*
   ElementUI有两种引入方式: 完整导入  和  按需导入
   如何选择?
   如果项目是toC的项目, 一律采用按需导入
   如果项目是toB的项目, 一般采用完整导入
   注意:
    按需导入, 打包时体积是会比较小
    完整导入, 打包时体积是固定的(比较大的)
    解决方案: CDN
*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // 英文语言包

// 4. 引入项目要用到的全局样式文件
// @是webpack配置的一个别名, 指向src目录
import '@/styles/index.scss'

// 5. 引入根组件
import App from './App'
// 6. 引入仓库
import store from './store'
// 7. 引入路由
import router from './router'
// 8. 引入字体图标文件
import '@/icons'
// 9. 引入权限控制文件
import '@/permission'

// 10. 全局注册ElementUI插件
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
// 10.1 给vue上面挂在一个封装好的axios模块,以后在任何一共vue文件里面都可以使用this.$ais 来发送网络请求，这个需要知道。
// import ais from '@/utils/request'
// Vue.prototype.$ais = ais

// 11. 查看当前项目运行的环境
// console.log(process.env.NODE_ENV) // development

// 12. 注册全局自定义指令
// --------------step1--------------
/*
Vue.directive('imagerror', {
  // 会在当前指令作用的dom元素 插入之后执行
  inserted(dom, binding) {
    // console.log(dom, binding)
    // img标签加载src中的地址失败时会触发执行
    dom.onerror = function() {
      dom.src = binding.value
    }
  }
})

Vue.directive('color', {
  inserted(dom, { value }) {
    dom.style.color = value
  }
})
*/

// ---------------step2--------------
import * as directives from '@/directives'
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})
// 13注册PageTools组件
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)
import HrsassUI from '@/components'
Vue.use(HrsassUI)
// 14 注册事件格式化组件
import * as filters from '@/filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
import i18n from '@/lang'

// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

// 将App.vue根组件转换成DOM元素渲染到指定的挂载点(灰常重要)
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

// ------------
// render: function(createElement) {
//   return createElement(App)
// }
// ------------
// render(createElement) {
//   return createElement(App)
// }
// ------------
// render(h) {
//   return h(App)
// }
// -------------
// render: h => h(App)
